@switch (true) {
  @case (!isActiveDirectoryEnabled && !isLdapEnabled) {
    <div class="everything-disabled">
      <ix-empty [conf]="noDirectoryServicesConfig"></ix-empty>
      <div class="actions">
        <button
          *ixRequiresRoles="requiredRoles"
          mat-button
          ixTest="configure-active-directory"
          [ixUiSearch]="searchableElements.elements.configureActiveDirectory"
          (click)="openActiveDirectoryForm()"
        >
          {{ 'Configure Active Directory' | translate }}
        </button>
        <button
          *ixRequiresRoles="requiredRoles"
          mat-button
          ixTest="configure-ldap"
          [ixUiSearch]="searchableElements.elements.configureLdap"
          (click)="openLdapForm()"
        >
          {{ 'Configure LDAP' | translate }}
        </button>
      </div>
    </div>
  }

  @case (isActiveDirectoryEnabled) {
    <div
      class="services"
      [ixUiSearch]="searchableElements.elements.directoryServices"
    >
      <ng-container *ngTemplateOutlet="dataCard; context: { card: activeDirectoryDataCard }"></ng-container>
      <mat-card>
        <mat-toolbar-row><h3>{{ 'LDAP' | translate }}</h3></mat-toolbar-row>
        <mat-card-content>
          <div class="disabled-message">
            <p>{{ 'LDAP is disabled.' | translate }}</p>
            <p>{{ 'To enable disable Active Directory first.' | translate }}</p>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
  }

  @case (isLdapEnabled) {
    <div class="services">
      <mat-card>
        <mat-toolbar-row><h3>{{ 'Active Directory' | translate }}</h3></mat-toolbar-row>
        <mat-card-content>
          <div class="disabled-message">
            <p>{{ 'Active Directory is disabled.' | translate }}</p>
            <p>{{ 'To enable disable LDAP first.' | translate }}</p>
          </div>
        </mat-card-content>
      </mat-card>
      <ng-container *ngTemplateOutlet="dataCard; context: { card: ldapDataCard }"></ng-container>
    </div>
  }
}

<cdk-accordion-item
  #expansionPanel="cdkAccordionItem"
  class="advanced-settings"
  [class.expanded]="expansionPanel.expanded"
>
  <h3 class="header">
    {{ 'Advanced Settings' | translate }}

    @if (!expansionPanel.expanded) {
      <button
        mat-button
        ixTest="show-advanced-settings"
        (click)="onAdvancedSettingsOpened(expansionPanel)"
      >{{ 'Show' | translate }}</button>
    }
  </h3>

  <div class="advanced-settings-cards">
    <ix-idmap-list [paginator]="false" [inCard]="true"></ix-idmap-list>
    <ng-container *ngTemplateOutlet="dataCard; context: { card: kerberosSettingsDataCard }"></ng-container>
    <ix-kerberos-realms-list [paginator]="false" [inCard]="true"></ix-kerberos-realms-list>
    <ix-kerberos-keytabs-list [paginator]="false" [inCard]="true"></ix-kerberos-keytabs-list>
  </div>
</cdk-accordion-item>

<ng-template #dataCard let-card="card">
  @if (typeCard(card); as card) {
    <mat-card>
      <mat-toolbar-row>
        <h3>{{ card.title }}</h3>
        <div class="actions action-icon">
          <button
            mat-button color="default"
            [ixTest]="[card.title, 'settings']"
            (click)="card.onSettingsPressed()"
          >
            {{ 'Settings' | translate }}
          </button>
        </div>
      </mat-toolbar-row>
      <mat-card-content>
        <mat-list>
          @for (item of card.items; track item) {
            <mat-list-item class="card-list-item">
              <span class="label">{{ item.label | translate }}:</span>
              <span class="value">{{ item.value || ('None' | translate) }}</span>
            </mat-list-item>
          }
        </mat-list>
      </mat-card-content>
    </mat-card>
  }
</ng-template>
